<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充值</title>
    <link type="text/css" rel="stylesheet"
          href="../../bootstrap-4.4.1-dist/css/bootstrap.css">
    <script src="../../js/jquery.js"></script>
    <script src="../../bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</head>
<style>
    body {
        user-select: none; /* 禁止文本被选中 */
        -webkit-user-select: none; /* Chrome浏览器的兼容性处理 */
        -moz-user-select: none; /* Firefox浏览器的兼容性处理 */
        -ms-user-select: none; /* IE/Edge浏览器的兼容性处理 */
    }
    .card {
        transition: transform 0.3s;
    }
    .card:hover {
        transform: scale(0.9);
        cursor: pointer;
    }
    #topUp:hover{
        cursor: pointer;
    }
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: white">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="../../image/logo.png" alt="Logo" style="border-radius: 50%;" width="30" height="30"
                 class="d-inline-block align-top">
            SUN 图书馆
        </a>
    </div>
</nav>
<p style="height: 5px;background-color:brown"></p>
<div style="width: 1000px;margin:20px auto;">
    <p><span style="background-color:lightsalmon">&nbsp;</span>&nbsp;充值</p>
    <div style="height: 100px;background-color: whitesmoke;width: 100%;padding: 15px 10px;border-radius: 5px">
        <div class="row">
            <!-- 使用Bootstrap的卡片组件 -->
            <div class="col-md-3">
                <div class="card" money="6" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
                    <div class="card-body text-center">
                        <div>￥&nbsp;<span style="color: #4e555b">6</span></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" money="18" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
                    <div class="card-body text-center">
                        <div>￥&nbsp;<span style="color: #4e555b">18</span></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" money="64" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
                    <div class="card-body text-center">
                        <div>￥&nbsp;<span style="color: #4e555b">64</span></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" money="128" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
                    <div class="card-body text-center">
                        <div>￥&nbsp;<span style="color: #4e555b">128</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <p><span style="background-color: lightsalmon">&nbsp;</span>&nbsp;充值金额
        <input type="text" id="money" readonly style="width: 100px;height: 22px;font-size: 15px" placeholder="选择充值金额">
    </p>
    <br>
    <p><input id="topUp" type="button" value="充值" style="background-color: #333;color: white;border-radius: 10px;border: none;width: 60px"></p>
</div>

</body>
</html>
<script>
    $('.card').click(function () {
        let money = $(this).attr('money');
        $('#money').val(money)
    });
    $('#topUp').click(function (){
        if ($('#money').val() ==''){
            alert("请选择充值金额!")
        }else {
            let money = $('#money').val()
            let opr = "topUpMoney"
            $.ajax({
                'url': '../../ReaderServlet.action',
                'type': 'post',
                'data': {opr,money},
                'dataType': 'json',
                'success': topUpMoneySuccess
            })
        }
    })
    function topUpMoneySuccess(data) {
        if (data == 'ok'){
            alert("充值成功!")
            window.location.href = "../../html/home/home.html"
        }else {
            alert("充值失败!")
        }
    }
</script>